<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="Application">
      <input type="text" v-model="textField" />
      <p>文本输入内容：{{ textField }}</p>

      <textarea v-model="textarea"></textarea>
      <p style="white-space: pre-line;">多行文本内容：{{ textarea }}</p>

      <input type="checkbox" v-model="checkbox" />
      <p>{{ checkbox }}</p>

      <input type="checkbox" value="足球" v-model="checkList" />足球
      <input type="checkbox" value="篮球" v-model="checkList" />篮球
      <input type="checkbox" value="排球" v-model="checkList" />排球
      <p>{{ checkList }}</p>

      <input type="radio" value="男" v-model="sex" />男
      <input type="radio" value="女" v-model="sex" />女
      <p>{{ sex }}</p>
      
      <select v-model="select">
        <option>男</option>
        <option>女</option>
      </select>
      {{ select }}

      <select v-model="selectList" multiple>
        <option>足球</option>
        <option>篮球</option>
        <option>排球</option>
      </select>
      {{ selectList }}
    </div>
    <script>
      const { createApp, ref } = Vue;
      let config = {
        setup() {
          const textField = ref('');
          const textarea = ref('');
          const checkbox = ref(true);
          const checkList = ref(['足球']);
          const sex = ref('女');
          const select = ref('女');
          const selectList = ref(['足球']);
          return { textField, textarea, checkbox, checkList, sex, select, selectList };
        },
      };
      createApp(config).mount("#Application");
    </script>
  </body>
</html>
